<template>
    <div class="addpadding">
      <div class="padding2"> 


      <div class="num">
                    <span> {{ options.num }} </span>  <span> COINS</span></div>
                  <div class="bonus"> + {{ options.bonus }} BONUS</div>
                  <div class="price"> USD $ {{ options.price }}</div>
 
    
  
      </div>
  
      <van-cell-group   :border="true" >
  
      </van-cell-group>
      <div>
        <transition name="fade" mode="out-in" appear>
          <div >
            <van-cell-group inset>
    <!-- 输入任意文本 -->
      <van-field v-model="fromuserinfo.billingFirstName" label="FirstName"   placeholder="billingLastName"  />
    
      <van-field v-model="fromuserinfo.billingLastName" type="text" label="LastName"   placeholder="billingLastName" />
   
      <van-field v-model="fromuserinfo.billingPhone" type="tel" label="  Phone"   placeholder="billingPhone" />
  
      <van-field v-model="area2" readonly  @click="areaShow=true"   right-icon="arrow" label="Area"  placeholder="Area" />
      <!-- <van-area title="标题" :area-list="areaList" value="110101" :columns-num="2"/> -->
      <van-field    v-model="fromuserinfo.billingAddress"  label="Address" placeholder="Address"  />
      <van-field    v-model="fromuserinfo.email"  label="email" placeholder="email"  />
        <van-field    v-model="fromuserinfo.cardNo"  label="cardNo" placeholder="cardNo"  />
        <van-field    v-model="fromuserinfo.expYear"  label="expYear" placeholder="expYear"  />
        <van-field    v-model="fromuserinfo.expMonth"  label="expMonth" placeholder="expMonth"  />
        <van-field    v-model="fromuserinfo.cvv"  label="cvv" placeholder="请输入cvv"  />  
        <!-- <van-button @click="onSave" block style="margin-top: 10px;" round color="linear-gradient(to right, #ff6034, #ee0a24)">
          Pay
  </van-button> -->
    </van-cell-group>
          </div>
        </transition>

      <van-button  @click="onPay" block style="margin-top: 10px;" round color="linear-gradient(to right, #ff6034, #ee0a24)">
          Pay
  </van-button>
    
  
  
  
  
   
  </div>
  
  
  
  <van-popup
   class="pay"  @click.stop   v-model:show="areaShow"
    round
    position="bottom"
    safe-area-inset-bottom
    
  >
  <van-area title="标题" 
  :area-list="areaList" 
  :value="areavalue"
  @confirm="confirm"
  @cancel ="areaShow=false"
  :columns-num="2"/>
  
  </van-popup>
      <!-- <van-area   title="标题" :area-list="areaList" /> -->
    </div>
  </template>
  
  <script>
  // import { Toast  ,Cell, CellGroup} from 'vant';
  
  import { Locale } from 'vant';
  // 引入英文语言包
  import enUS from 'vant/es/locale/lang/en-US';
  
  Locale.use('en-US', enUS);
  import { areaList ,State  } from '@/assets/js/address'
  import { Toast } from 'vant';
  import {  topay ,tobuyB } from '@api/reader'
  
  export default {
    props:['options'],
    data() {
      return {
        options:[
          {  id:1, num:500, price:5  },
          { id:2,  num:1500, price:10 },
          {  id:3, num:4000, price:20  },
          { id:4,  num:10000, price:50  },
        ],
        selectNum:1,
        userstatus:0,
        areaList: areaList,
        searchResult: [],
        AddressInfo :{ 
          name:"name"
        },
  
        areavalue :"",
        
        areaShow:false,
       
        fromuserinfo: 
        process.env.NODE_ENV =='development' ? {
          billingFirstName: "Carlo",
          billingLastName: "Phil",
          billingAddress: "3970  Mesa Drive",
          billingCity: "Las Vegas", 
          billingState: "NV",
          billingCountry: "LV",
          billingZipCode: "3970",
          billingPhone: "702-810-9982",
          cardNo:"4931930110475120",
          expYear:"2026",
          expMonth:"1",
          cvv:"849",
          email:"ekriafipcd@iubridge.com",
        } :  {
          billingFirstName: "",
          billingLastName: "",
          billingAddress: "",
          billingCity: "", 
          billingState: "",
          billingCountry: "",
          billingZipCode: "",
          billingPhone: "",
          cardNo:"",
          expYear:"",
          expMonth:"",
          cvv:"",
          email:"",
        }  
      };
    },
    methods: { 
      confirm(value){
        console.log("123");
        console.log(    value );
        this.areaShow = false
        this.Area = value[0].name +'/'+value[1].name
        this.fromuserinfo.billingState =State[ value[0].name ] 
        this.fromuserinfo.billingCity = value[1].name
        // console.log( this.fromuserinfo);
      
      },
  
      async  onNext(){
          this.userstatus =2
      },
     async onSave() {
       
        console.log(this.fromuserinfo);
        console.log(   this.$route.query  );
        var data ={  
                id:this.$props.options.id ,  // 书ID
                returnUrl: location.href,
                extra: this.fromuserinfo,
        }
        if(this.$route.query.id ){
          data.agent = this.$route.query.id
        }
        let  result   =  await topay(data)
      console.log(result);
      // this.$Toast.success(result.message);s
       if(result.code ==20000  ){
          location.reload()
       }else {
        this.$Toast.fail(result.message);
        this.userstatus =1
       }
      //  if(result.code ==20000 && result.data?.payUrl ){
      //     location.href=  result.data.payUrl 
      //  }else {
      //   this.$Toast.fail(result.message);
      //   this.userstatus =1
      //  }
            
      },
      async onPay(){
          console.log("携带参数去支付");
          var data ={  
  
                id:this.options.id ,  // 书ID
                returnUrl: location.href,
                extra: this.fromuserinfo,
        }
        
          await tobuyB(data).then( (res)=>{
         this.$Toast.fail(res.message);
          } )
  
      }
  
  
    },
    created(){
      console.log(process.env);
      console.log(this.$Toast );
      this.$on('chose',function(){
        console.log("chose子");
      })
   
    },
  
    computed: {
      area2:function(){
        return   this.fromuserinfo.billingState+ this.fromuserinfo.billingCity
      }
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .addpadding{
     padding: 1rem 0.2rem;
  }
  ::v-deep .addpadding{
        // margin-top: 1rem;
        padding: 0.3rem;
        box-sizing: border-box;
      span{ 
        font-size: 0.6rem;
      }
    input{ 
      font-size: 0.6rem;
      border-bottom: 1px solid black;
     
    }
  
  }
  
  
  .address123{ 
     padding: 0 ;
  }
  
  .flex{
    display: flex;
    margin-top: 20px;
  }
  
  
  .priceNum{
    text-align: center;
  }
  
  // priceBox
  .priceBox{
    text-align: center;
    line-height: 2rem;
    width: 2.5rem;
    height: 2rem;
    box-sizing: border-box;
    border-radius: 5px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
  }
  .select{
    border: 2px solid #b550ff;
   
  }
  /* 
   过渡效果
  */
  .fade-enter-active {
      transition: all .3s ease;
    }
    .fade-leave-active {
      transition: all 0s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .fade-leave-to{
  
    }
    .fade-enter
    /* .slide-fade-leave-active for below version 2.1.8 */ {
      transform: translateX(50px);
      opacity: 0;
    }



    .num{
        text-align: center;
      font-weight: 600;
      padding-left: 0.5rem;
      color: black;
    }
    .num span:nth-child(1){
      font-size: 0.8rem;
    }
    .num span:nth-child(2){
      font-size: 0.5rem;
    }

    .bonus{
        text-align: center;
      font-size: 0.4rem;
      color: #ccc;
      margin:  0.2rem 0;
      padding-left: 0.5rem;
    }
    .price{
      border-top: 0.5px solid #ccc;
      font-size: 0.7rem;
      padding: 0.1rem 0;
      text-align: center;
      color: #2409ed;
      line-height: 1rem;
     
    }
  
  </style>